<template>
	<view>
		<!--<z-nav-bar>完善个人资料</z-nav-bar>
		<public-module></public-module>-->
		<swiper ref="swiper" class="swiper" :duration="500" :current="current" vertical :disable-touch="true">
			<!-- 基本信息 -->
			<swiper-item catchtouchmove="catchTouchMove">
				<view class="forms">
					<view class="title-bar">基本信息</view>
					<uni-forms :modelValue="formData" ref="form1">
						<uni-forms-item label="姓名" name="name">
							<uni-easyinput type="text" v-model="baseData.name" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="" name="phone">
							<uni-easyinput type="text" v-model="baseData.phone" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="QQ" name="QQ">
							<uni-easyinput type="text" v-model="baseData.QQ" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="在读学校" name="school">
							<view class="select" @click="onPageJump('school')">{{baseData.school}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="院系" name="major">
							<view class="select" @click="onPageJump('major')">{{baseData.major}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="年级" name="grade">
							<view class="select" @click="onPageJump('grade')">{{baseData.grade}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="专业" name="profession">
							<view class="select" @click="onPageJump('profession')">{{baseData.profession}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="班级" name="class">
							<uni-easyinput type="text" v-model="baseData.class" placeholder="请输入" />
						</uni-forms-item>
						<button type="primary" class="btn" @click="next">下一步</button>
					</uni-forms>
				</view>
			</swiper-item>
			<swiper-item  catchtouchmove="catchTouchMove">
					<!-- 学籍信息 -->
				<view class="forms">
					<view class="title-bar">学籍信息</view>
					<uni-forms :modelValue="formData" ref="form2">
						<uni-forms-item label="姓名" name="name">
							<uni-easyinput type="text" v-model="formData.name" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="手机" name="phone">
							<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="QQ" name="QQ">
							<uni-easyinput type="text" v-model="formData.QQ" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="在读学校" name="school">
							<view class="select" @click="onPageJump('school')">{{formData.school}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="院系" name="major">
							<view class="select" @click="onPageJump('major')">{{formData.major}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="年级" name="grade">
							<view class="select" @click="onPageJump('grade')">{{formData.grade}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="专业" name="profession">
							<view class="select" @click="onPageJump('profession')">{{formData.profession}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="班级" name="class">
							<uni-easyinput type="text" v-model="formData.class" placeholder="请输入" />
						</uni-forms-item>
						<button type="primary" class="btn" @click="next">下一步</button>
					</uni-forms>
				</view>
			</swiper-item>
			<swiper-item  catchtouchmove="catchTouchMove">
						<!-- 报名信 -->
				<view class="forms">
					<view class="title-bar">报名信</view>
					<uni-forms :modelValue="formData" ref="form3">
						<uni-forms-item label="姓名" name="name">
							<uni-easyinput type="text" v-model="formData.name" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="手机" name="phone">
							<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="QQ" name="QQ">
							<uni-easyinput type="text" v-model="formData.QQ" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="在读学校" name="school">
							<view class="select" @click="onPageJump('school')">{{formData.school}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="院系" name="major">
							<view class="select" @click="onPageJump('major')">{{formData.major}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="年级" name="grade">
							<view class="select" @click="onPageJump('grade')">{{formData.grade}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="专业" name="profession">
							<view class="select" @click="onPageJump('profession')">{{formData.profession}}
								<uni-icons type="arrowright" size="16"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="班级" name="class">
							<uni-easyinput type="text" v-model="formData.class" placeholder="请输入" />
						</uni-forms-item>
						<button type="primary" class="btn" @click="submitForm">提交报名</button>
					</uni-forms>
				</view>
			</swiper-item>
		</swiper>



		<!-- <button type="primary" class="btn" @click="submitForm">保存</button> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				baseData: {
					studentName: '',
					sex: '',
					QQ: '',
					school: '请选择',
					major: '请选择',
					grade: '请选择',
					profession: '',
					class: '',
				},
				current:0,
			}
		},
		onLoad(option) {},
		methods: {
			submitForm(form) {
				// 手动提交表单
				this.$refs.form3.submit().then((res) => {
					console.log('表单返回得值：', res)
					// 仅作为示例，非真实参数信息。
					uni.requestPayment({
					    provider: 'wxpay',
					    timeStamp: String(Date.now()),
					    nonceStr: 'A1B2C3D4E5',
					    package: 'prepay_id=wx20180101abcdefg',
					    signType: 'MD5',
					    paySign: '',
					    success: function (res) {
					        console.log('success:' + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				})
			},
			next(form) {
				console.log(form,'form')
				this.$refs.form1.submit().then((res) => {
					console.log('表单返回得值：', res)
					this.current = this.current+1
				})
			},
			catchTouchMove() {
			    return false;
			},
		},

	}
</script>

<style lang="scss">
	@import '@/style/mixin.scss';

	page {
		background-color: $uni-bg-color-grey;
	}
.swiper{
	margin-top: 10px;
	height:calc(100vh - 88px);
}

	.forms {
		width: 686upx;
		margin: 0 auto;
		padding: 24px 16px;
		background: #FEFFFF;
		border-radius: 16px;

		/deep/ input {
			text-align: right;
			outline: none;
		}

		/deep/ .is-input-border {
			border: 0 !important;
		}

		.title-bar {
			font-size: 17px;
			font-weight: bold;
			color: #323232;
			width: 100%;
			padding-bottom: 10px;
			border-bottom: 1px solid #F5F5F5;
		}

		.select {
			width: 100%;
			text-align: right;
			line-height: 72upx;
		}
	}

	.btn {
		background-color: $uni-theme-color;
		border-radius: 30px;
		margin-top: 36upx;
	}


	/deep/ .input-value-border {
		border: 0;
	}
</style>
